import React, { useRef, useState, useEffect } from 'react';

// styles
import styles from './index.less';
// 自定义组件
import LeafletComponent from '@/components/LeafletComponent';
import TextComponent from './components/TextComponent';
import CircleComponet from './components/CircleComponent';
import PointComponent from './components/PointComponent';
import PolylineComponent from './components/PolylineComponent';
import PolygonComponent from './components/PolygonComponent';
import CanvasMakersComponent from './components/CanvasMarkersComponent';
import TrackPlayComponent from './components/TrackPlayComponent';
import DragModal from '@/components/DragModalComponent';
import TimeLineComponent from './components/TimeLineComponent';

import DrawComponent from './components/DrawToolComponent'; //
import LeafletEditComponent from './components/PolylineEditComponent';

import EditablePolylineComponent from './components/PolylineEditable';
import GreenLineComponent from './components/GreenLineComponent';
// apis
import * as ReconnectingWebSocket from './../../../public/plugins/reconnecting-websocket';

export default () => {
  const [menuList, setMenuList] = useState([
    { name: '点', key: 'point' },
    { name: '折线', key: 'polyline' },
    { name: '圆', key: 'circle' },
    { name: '文字', key: 'txt' },
    { name: '区域', key: 'polygon' },
    { name: 'canvas标记', key: 'canvas-markers' },
    { name: '轨迹回放', key: 'track-play' },
    { name: '标绘', key: 'draw-leaflet' },
    { name: '轨迹编辑', key: 'leaflet-edit-polyline' },
    { name: '轨迹编辑新', key: 'editable-polyline' },
    { name: '绿线', key: 'green-line' },
  ]);
  const [activeKey, setActiveKey] = useState('');
  // 清除图层组
  const clearLayerFun = () => {
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'ctrl',
          payload: [
            {
              ctrl: 'clearGroup',
              groupId: 'MapGroup',
            },
          ],
        },
      ],
      () => {
        // console.log('清除完成了');
        setActiveKey('');
      },
    );
  };
  const initSocket = () => {
    var ws = new ReconnectingWebSocket('ws://124.222.224.186:8800', null, {
      debug: true,
      reconnectInterval: 3000,
    });

    ws.timeoutInterval = 5400;
    ws.onopen = function () {
      console.log('connected');
      setInterval(() => {
        ws.send('heartbeat');
      }, 2000);
    };
    ws.onmessage = function (e) {
      console.log('received: ' + e.data);
    };
  };
  useEffect(() => {
    // initSocket();
    return () => {
      clearLayerFun();
    };
  }, []);
  return (
    <div className={styles.AppContainer}>
      <LeafletComponent />
      <div className="menu-box">
        {menuList.map((v) => {
          return (
            <div
              className={`menu-item ${
                activeKey === v.key ? 'menu-item-active' : ''
              }`}
              key={v.key}
              onClick={() => {
                setActiveKey(v.key);
              }}
            >
              {v.name}
            </div>
          );
        })}
        <div className="menu-item menu-item-del" onClick={clearLayerFun}>
          清除图层
        </div>
      </div>
      {activeKey === 'point' && <PointComponent />}
      {activeKey === 'polyline' && <PolylineComponent />}
      {activeKey === 'polygon' && <PolygonComponent />}
      {activeKey === 'txt' && <TextComponent />}
      {activeKey === 'circle' && <CircleComponet />}
      {activeKey === 'canvas-markers' && <CanvasMakersComponent />}
      {activeKey === 'track-play' && <TrackPlayComponent />}
      {activeKey === 'draw-leaflet' && <DrawComponent />}
      {activeKey === 'leaflet-edit-polyline' && <LeafletEditComponent />}
      {activeKey === 'editable-polyline' && <EditablePolylineComponent />}
      {activeKey === 'green-line' && <GreenLineComponent />}
      {/*  时间轴 */}
      {/* <TimeLineComponent /> */}
      {/* dragModal  */}
      {/* <DragModal
        style={{
          left: 10,
          top: 10,
        }}
        width={600}
        height={400}
        title="拖拽模态框"
        dragModalClassName={styles.homeDragModal}
        open={true}
        footer={null}
      >
        <div className="jjj">qewqweqwe</div>
      </DragModal> */}
    </div>
  );
};
